<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>项目宝</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="<s:url value='css/mui.min.css'/>">
        <link rel="stylesheet" type="text/css" href="<s:url value='css/custom.css' />" />
        <style>
            html,
            body {
                background-color: #efeff4;
            }
            p {
                text-indent: 22px;
            }
            span.mui-icon {
                font-size: 14px;
                color: #007aff;
                margin-left: -15px;
                padding-right: 10px;
            }
            .mui-off-canvas-left {
                color: #fff;
            }
            .title {
                margin: 35px 15px 10px;
            }
            .title+.content {
                margin: 10px 15px 35px;
                color: #bbb;
                text-indent: 1em;
                font-size: 14px;
                line-height: 24px;
            }
            input {
                color: #000;
            }
        </style>
        <style>
            html,
            body {
                background-color: #efeff4;
            }
            
            .mui-bar~.mui-content .mui-fullscreen {
                top: 44px;
                height: auto;
            }
            
            .mui-pull-top-tips {
                position: absolute;
                top: -20px;
                left: 50%;
                margin-left: -25px;
                width: 40px;
                height: 40px;
                border-radius: 100%;
                z-index: 1;
            }
            
            .mui-bar~.mui-pull-top-tips {
                top: 24px;
            }
            
            .mui-pull-top-wrapper {
                width: 42px;
                height: 42px;
                display: block;
                text-align: center;
                background-color: #efeff4;
                border: 1px solid #ddd;
                border-radius: 25px;
                background-clip: padding-box;
                box-shadow: 0 4px 10px #bbb;
                overflow: hidden;
            }
            
            .mui-pull-top-tips.mui-transitioning {
                -webkit-transition-duration: 200ms;
                transition-duration: 200ms;
            }
            
            .mui-pull-top-tips .mui-pull-loading {
                /*-webkit-backface-visibility: hidden;
                -webkit-transition-duration: 400ms;
                transition-duration: 400ms;*/
                margin: 0;
            }
            
            .mui-pull-top-wrapper .mui-icon,
            .mui-pull-top-wrapper .mui-spinner {
                margin-top: 7px;
            }
            
            .mui-pull-top-wrapper .mui-icon.mui-reverse {
                /*-webkit-transform: rotate(180deg) translateZ(0);*/
            }
            
            .mui-pull-bottom-tips {
                text-align: center;
                background-color: #efeff4;
                font-size: 15px;
                line-height: 40px;
                color: #777;
            }
            
            .mui-pull-top-canvas {
                overflow: hidden;
                background-color: #fafafa;
                border-radius: 40px;
                box-shadow: 0 4px 10px #bbb;
                width: 40px;
                height: 40px;
                margin: 0 auto;
            }
            
            .mui-pull-top-canvas canvas {
                width: 40px;
            }
            
            .mui-slider-indicator.mui-segmented-control {
                background-color: #efeff4;
            }
        </style>
    </head>

    <body>
        <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
            <!--侧滑菜单部分-->
            <aside id="offCanvasSide" class="mui-off-canvas-left" >
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="title">导航</div>
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="createPj">创建项目</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="showPj">项目一览</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="showMyPj">我的项目</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right  mui-active"  id="showMyTeack">我的进度</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="myinfo">个人中心</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
            <!--主界面部分-->
            <div class="mui-inner-wrap">
                <header class="mui-bar mui-bar-nav">
                    <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                    <a class="mui-btn-link mui-pull-right" id="createTrack">创建</a>
                    <h1 class="mui-title">进度一览</h1>
                </header>
                   <div class="mui-content">
		            <div id="slider" class="mui-slider mui-fullscreen">
		                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		                    <div class="mui-scroll">
		                        <a class="mui-control-item mui-active" href="#item1mobile">进行中</a>
		                        <a class="mui-control-item" href="#item2mobile">已完成</a>
		                        <a class="mui-control-item" href="#item3mobile">已取消</a>
		                    </div>
		                </div>
		                <div class="mui-slider-group">
		                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
		                        <div id="scroll1" class="mui-scroll-wrapper">
		                            <div class="mui-scroll">
		                                <ul id="OA_task_2" class="mui-table-view ">
		                                <s:iterator value="trackIng" status="all" var="data">
		                                    <li class="mui-table-view-cell">
                                                <div class="mui-slider-right mui-disabled">
                                                  <a class="mui-btn mui-btn-yellow mui-icon mui-icon-compose" href="javascript:void(0)" id="edit" name="edit" 
                                                   target="<s:property value='#this.trackId'/>"></a> 
                                                  <a class="mui-btn mui-btn-red mui-icon mui-icon-trash" href="javascript:void(0)" id="delete" name="delete" 
                                                   target="<s:property value='#this.trackId'/>"></a>
                                                </div>
		                                        <div class="mui-slider-handle">
		                                            <div class="mui-table-cell">
		                                                <div class="oa-contact-avatar mui-table-cell">
		                                                    <span class="mui-badge mui-badge-success"><s:property value="#all.getIndex()+1"/></span>
		                                                    <s:if test="lever==3"><span class="mui-badge mui-badge-danger">难</span></s:if> 
		                                                    <s:elseif test="lever==2"><span class="mui-badge mui-badge-primary">中</span></s:elseif> 
		                                                    <s:elseif test="lever==1"><span class="mui-badge mui-badge-warning">易</span></s:elseif>
		                                                </div>
		                                                <div class="oa-contact-content mui-table-cell">
		                                                    <div class="mui-clearfix">
		                                                        <h4 class="oa-contact-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${pjName}${lever}</h4>
		                                                    </div>
		                                                    <p class="oa-contact-email mui-h6">${trackStart} - ${trackEnd}(${trackExTime}小时)</p>
                                                            <p class="oa-contact-email mui-h6">进度：${trackPct}%   &nbsp;&nbsp;&nbsp;耗时： <s:if test="trackRealTime == null || trackRealTime ==''">0</s:if><s:else>${trackRealTime}</s:else>小时</p>
		                                                    <p class="oa-contact-email mui-h6">${command}</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </li>
		                                 </s:iterator>
		                                </ul>
		                            </div>
		                        </div>
		                    </div>
		                    <div id="item2mobile" class="mui-slider-item mui-control-content">
		                        <div class="mui-scroll-wrapper">
		                            <div class="mui-scroll">
		                                <ul class="mui-table-view">
		                                    
		                                <s:iterator value="trackOver" status="all">
		                                    <li class="mui-table-view-cell">
                                                <div class="mui-slider-right mui-disabled">
                                                  <a class="mui-btn mui-btn-yellow mui-icon mui-icon-compose" href="javascript:void(0)" id="edit" name="edit" 
                                                   target="<s:property value='#this.trackId'/>"></a> 
                                                  <a class="mui-btn mui-btn-red mui-icon mui-icon-trash" href="javascript:void(0)" id="delete" name="delete" 
                                                   target="<s:property value='#this.trackId'/>"></a>
                                                </div>
		                                        <div class="mui-slider-handle">
		                                            <div class="mui-table-cell">
		                                                <div class="oa-contact-avatar mui-table-cell">
		                                                    <span class="mui-badge mui-badge-success"><s:property value="#all.getIndex()+1"/></span>
		                                                    <s:if test="lever==3"><span class="mui-badge mui-badge-danger">难</span></s:if> 
		                                                    <s:elseif test="lever==2"><span class="mui-badge mui-badge-primary">中</span></s:elseif> 
		                                                    <s:elseif test="lever==1"><span class="mui-badge mui-badge-warning">易</span></s:elseif>
		                                                </div>
		                                                <div class="oa-contact-content mui-table-cell">
		                                                    <div class="mui-clearfix">
		                                                        <h4 class="oa-contact-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${pjName}${lever}</h4>
		                                                    </div>
		                                                    <p class="oa-contact-email mui-h6">${trackStart} - ${trackEnd}(${trackExTime}小时)</p>
                                                            <p class="oa-contact-email mui-h6">进度：${trackPct}%   &nbsp;&nbsp;&nbsp;耗时： <s:if test="trackRealTime == null || trackRealTime ==''">0</s:if><s:else>${trackRealTime}</s:else>小时</p>
		                                                    <p class="oa-contact-email mui-h6">${command}</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </li>
		                                 </s:iterator>
		                                </ul>
		                            </div>
		                        </div>
		                    </div>
		                    <div id="item3mobile" class="mui-slider-item mui-control-content">
		                        <div class="mui-scroll-wrapper">
		                            <div class="mui-scroll">
		                                <ul class="mui-table-view">
		                                    
		                                <s:iterator value="trackDel" status="all">
		                                    <li class="mui-table-view-cell">
		                                        <div class="mui-slider-right mui-disabled">
				                                  <a class="mui-btn mui-btn-yellow mui-icon mui-icon-compose" href="javascript:void(0)" id="edit" name="edit" 
				                                   target="<s:property value='#this.trackId'/>"></a> 
				                                  <a class="mui-btn mui-btn-red mui-icon mui-icon-trash" href="javascript:void(0)" id="delete" name="delete" 
				                                   target="<s:property value='#this.trackId'/>"></a>
		                                        </div>
		                                        <div class="mui-slider-handle">
		                                            <div class="mui-table-cell">
		                                                <div class="oa-contact-avatar mui-table-cell">
		                                                    <span class="mui-badge mui-badge-success"><s:property value="#all.getIndex()+1"/></span>
		                                                    <s:if test="lever==3"><span class="mui-badge mui-badge-danger">难</span></s:if> 
		                                                    <s:elseif test="lever==2"><span class="mui-badge mui-badge-primary">中</span></s:elseif> 
		                                                    <s:elseif test="lever==1"><span class="mui-badge mui-badge-warning">易</span></s:elseif>
		                                                </div>
		                                                <div class="oa-contact-content mui-table-cell">
		                                                    <div class="mui-clearfix">
                                                                <h4 class="oa-contact-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${pjName}${lever}</h4>
		                                                    </div>
		                                                    <p class="oa-contact-email mui-h6">${trackStart} - ${trackEnd}(${trackExTime}小时)</p>
                                                            <p class="oa-contact-email mui-h6">进度：${trackPct}%   &nbsp;&nbsp;&nbsp;耗时： <s:if test="trackRealTime == null || trackRealTime ==''">0</s:if><s:else>${trackRealTime}</s:else>小时</p>
		                                                    <p class="oa-contact-email mui-h6">${command}</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </li>
		                                 </s:iterator>
		                                </ul>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
                </div>
                <!-- off-canvas backdrop -->
                <div class="mui-off-canvas-backdrop"></div>
            </div>
        </div>
        <script src="<s:url value='js/mui.min.js'/>"></script>
        <script>
            mui.init();
             //侧滑容器父节点
            var offCanvasWrapper = mui('#offCanvasWrapper');
             //主界面容器
            var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
             //菜单容器
            var offCanvasSide = document.getElementById("offCanvasSide");
            
             //移动效果是否为整体移动
            var moveTogether = false;
             //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
            var classList = offCanvasWrapper[0].classList;
            classList.add('mui-slide-in');
             //主界面和侧滑菜单界面均支持区域滚动；
            mui('#offCanvasSideScroll').scroll();
            mui('#offCanvasContentScroll').scroll();
            
            mui('.mui-content').on('tap','#edit',function(){
                mui.openWindow({url:"getTrack.action?trackId="+this.target});
            }); 
            mui('.mui-content').on('tap','#delete',function(){
                mui.openWindow({url:"delTrack.action?trackId="+this.target});
            }); 
         
            mui('body').on('tap','#createTrack',function(){
                mui.openWindow({url:"createTrack.action"});
            }); 
            
        </script>
        
        <script src="<s:url value='js/common.js'/>"></script>
    </body>
</html>